/**
 * Simple body class that represents <body>
 * @type {ompluClass}
 */
Omplus.views.Body = Omplus.base.extend(Omplus.views.Container, {
    init:function () {
        this.content = $("body");
    },
    render:function () {
        this.content.addClass("body").attr("id", this.omplusName);
    },
    omplusType:"Body"
});

Omplus.views.Panel = Omplus.base.extend(Omplus.views.Container, {
    render:function () {
        this.content.addClass("panel").attr("id", this.omplusName);
    },
    omplusType:"Panel"
});

Omplus.views.TabPanel = Omplus.base.extend(Omplus.views.Panel, {
    render:function () {

        this.titleView = Omplus.base.create(Omplus.views.Label, {
            omplusName:this.omplusName + "_title",
            model:this.model,
            controller:this.controller
        }).omplusName;
        this.titleContent = jQuery.extend(true, {}, $("<a></a>")).attr("href", "#" + this.omplusName).append(Omplus.globals.getObject(this.titleView).getContent());
        this.titleContent = jQuery.extend(true, {}, $("<li></li>")).append(this.titleContent).addClass("tabTitle").attr("id", this.omplusName + "_tabTitle");
    },
    getTitleContent:function () {
        return this.titleContent;
    },
    omplusType:"TabPanel",
    titleContent:null,
    tabTitle:null,
    titleView:null
});

Omplus.views.AccordionPanel = Omplus.base.extend(Omplus.views.Panel, {
    render:function () {

        this.titleView = Omplus.base.create(Omplus.views.Label, {
            omplusName:this.omplusName + "_title",
            model:this.model,
            controller:this.controller
        }).omplusName;
        this.titleContent = jQuery.extend(true, {}, $("<h3></h3>")).append(Omplus.globals.getObject(this.titleView).getContent());
//        this.titleContent.addClass("tabTitle").attr("id", this.omplusName+"_tabTitle");
    },
    getTitleContent:function () {
        return this.titleContent;
    },
    omplusType:"AccordionPanel",
    titleContent:null,
    tabTitle:null,
    titleView:null
});

Omplus.views.RadioGroup = Omplus.base.extend(Omplus.views.Container, {
    render:function () {
        this.getContent().attr("id", this.omplusName);
    },
    omplusType:"RadioGroup",
    layout:null,
    setValue:function (newValue) {
        this.empty();
        var helper;
        helper = Omplus.base.create(Omplus.views.HiddenInput, {
            omplusName:this.omplusName + "_current",
            model:this.model + ".current",
            controller:this.controller
        });
        this.append(helper.omplusName);
        for (var i in newValue.list) {
            helper = Omplus.base.create(Omplus.views.RadioButton, {
                name:this.omplusName,
                omplusType:"RadioButton",
                model:this.model + ".current",
                omplusName:this.omplusName + "_" + i,
                value:newValue.list[i],
                controller:this.controller
            });
            if (newValue.current == newValue.list[i]) {
                helper.getContent().find("input").attr("checked", true);
            }
            this.append(helper.omplusName);
        }
    },
    getValue:function () {

    },
    empty:function () {
        for (var i in this.components) {
            Omplus.globals.getObject(this.components[i]).destroy();
        }
        this.clear();
    },
    emptyError:function () {

    }
});

Omplus.views.Pagination = Omplus.base.extend(Omplus.views.Container, {
    init:function () {
        if (!this.edges) {
            this.edges = 2;
        }
        if (!this.pages) {
            this.pages = 1;
        }
        if (!this.displayedPages) {
            this.displayedPages = 1;
        }
    },
    render:function () {
        var helper = this;
        var object = {
            pages:this.pages,
            displayedPages:this.displayedPages,
            edges:this.edges,
            hrefText:"#" + this.omplusName,
            onPageClick:function (pageNumber) {
                helper.onPageClick(pageNumber);
            }
        };
        if (this.currentPage != null)
            object.currentPage = this.currentPage;
        this.content.pagination(object).addClass("pagination").attr("id", this.omplusName);
    },
    omplusType:"Pagination",
    pages:null,
    displayedPages:null,
    edges:null,
    currentPage:null,
    onPageClick:function (pageNumber) {
    }
});

Omplus.views.LabelInputPair = Omplus.base.extend(Omplus.views.Panel, {
    init:function () {
        this.label = Omplus.base.create(Omplus.views.Label, {
            omplusName:this.omplusName + "_label",
            model:this.labelModel,
            controller:this.labelController,
            width:this.labelWidth
        });

        var options = {
            omplusName:this.omplusName + "_input",
            model:this.model,
            controller:this.controller,
            width:this.inputWidth,
            errorable:this.errorable,
            readOnly:this.readOnly
        };
        
        if (this.renderComponent) options.render = this.renderComponent;
        if (this.inputCssClasses) options.cssClasses = this.inputCssClasses;
        if (this.datalist != null) options.datalist = this.datalist;

        // TODO make an options parameter so that it could be used for when you want to set specific options for input/label
        switch (this.inputType) {
            case "Select":
                options.current = this.current;
                options.showModel = this.showModel;
                options.select = this.select;
                break;
            case "Datepicker":
                options.isFrom = this.isFrom;
                options.isTo = this.isTo;
                options.minDate = this.minDate;
                options.maxDate = this.maxDate;
                options.yearRange = this.yearRange;
                break;
            case "NewDateInput":
                options.minDate = this.minDate;
                options.maxDate = this.maxDate;
                options.gt = this.gt;
                options.lt = this.lt;
                options.yearRange = this.yearRange;
                break;
            case "Button":
                options.click = this.click;
                options.errorable = false;
                break;
            case "TextArea":
                options.rows = this.rows;
                options.cols = this.cols;
                options.fixedSize = this.fixedSize;
                break;
            case "List":
                options.showModel = this.showModel;
                options.listModel = this.listModel;
                options.click = this.click;
                break;
            default:
                break;
        }

        if (this.inputOptions) {
            for (var i in this.inputOptions) {
                options[i] = this.inputOptions[i];
            }
        }

        this.input = Omplus.base.create(Omplus.views[this.inputType], options);

        this.components = [
            this.label.omplusName,
            this.input.omplusName
        ];

    },
    inputType:"TextInput",
    labelModel:null,
    labelController:null,
    errorable:true,
    labelWidth:"40%",
    inputWidth:"60%",
    omplusType:"LabelInputPair",
    datalist:null,

    // Used if Datepicker is used as input
    isFrom:false,
    isTo:false,
    minDate:null,
    maxDate:null,
    yearRange:"-100:+0",
    lt:null,
    gt:null,

    // Used if TextArea is used as input
    rows:null,
    cols:null,
    fixedSize:false,

    // TODO options provided for input (should replace above parameters)
    inputOptions:null,

    layout:{
        omplusName:"HorizontalLayout"
    },
    cssClasses:[
        "LabelInputPair"
    ],
    select:function () {
    },
    click:function () {
    }
});

/**
 * This view is used to display a list of all models is SingleChooser model provided
 * in <OpeningTabPanel>
 *
 * @type {omplusClass}
 */
Omplus.views.OpeningTabsList = Omplus.base.extend(Omplus.views.Control, {
    omplusType:"OpeningTabsList",
    render:function () {
        var list = jQuery.extend(true, {}, $("<div></div>"));
        list.addClass("tabListContainer").attr("id", this.omplusName).appendTo(this.content);
        this.content.addClass("tabList");
        var helper = this;
        $("body").on("click", "#" + this.omplusName + " .tabListItem", function () {
            var index = $(this).attr("data-index");
            var model = Omplus.globals.getObject(helper.model);
            $(this).parent().find(".tabListItem").removeClass("active");
            $(this).addClass("active");
            var next = $(this).parent().parent().next();
            next.hide("clip", {}, 300, function () {
                model.chooseByIndex(index);
                helper.onChange();
                next.show("clip", {}, 300);
            });
        });
        $("body").on("click", "#" + this.omplusName + " .tabListItemClose", function () {
            var index = $(this).parent().attr("data-index");
            var container = $(this).parent().parent();
            var model = Omplus.globals.getObject(helper.model);
            $(this).parent().remove();
            model.removeByIndex(index);
            model.chooseByIndex(0);
            container.find(".tabListItem.active").removeClass("active");
            container.find(".tabListItem:first").addClass("active");
            var dataIndex = 0;
            container.find(".tabListItem").each(function(){
                $(this).attr("data-index", dataIndex);
                dataIndex++;
            });
            if (helper.management != null) {
                Omplus.globals.getObject(helper.management).actions[2].run();
                Omplus.globals.getObject(helper.management).refreshView();
            }
        });
    },
    setValue:function (newValue) {
        var container = this.content.find(".tabListContainer");
        container.html("");
        if (newValue["list"]) {
            for (var i in newValue.list) {
                var list = jQuery.extend(true, {}, $("<div></div>"));
                var close = jQuery.extend(true, {}, $("<span>x</span>"));
                list.attr("data-index", i).addClass("tabListItem").appendTo(container);
                list.html(newValue.list[i][this.showModel]);
                close.addClass("tabListItemClose").css({
                    "margin-left":"10px",
                    "font_size":".8em",
                    color:"red"
                }).appendTo(list);
            }
        }
        this.onChange();
    },
    onChange:function(){

    },
    management:null
});

/**
 * View used to display a SingleChooser model in a form of tabs
 *
 * @type {omplusClass}
 */

Omplus.views.OpeningTabPanel = Omplus.base.extend(Omplus.views.Panel, {
    // creates two views, ove for a list of tabs, the other for opened tab
    init:function () {
        this.list = Omplus.base.create(Omplus.views.OpeningTabsList, {
            omplusName:this.omplusName + "List",
            model:this.model,
            showModel:this.showModel,
            controller:this.controller,
            errorable:false,
            management:this.management,
            onChange:this.onChange
        });
        this.displayedTab = Omplus.base.create(Omplus.views[this.omplusProto], {
            omplusName:this.omplusName + "Displayed",
            cssClasses:[
                "displayedTab"
            ]
        });
        this.components = [this.list.omplusName, this.displayedTab.omplusName];
    },
    omplusType:"OpeningTabPanel",
    // model from omplusProto that is used for tab name
    showModel:null,
    // OpeningTabsList - list of tabs
    list:null,
    // View showing SingleChoosers current model    displayedTab:null,
    // Model used in SingleChooser
    omplusProto:null,
    // this.model should be a SingleChooser
    management:null,
    onChange:function(){
    }
});


/**
 * Dialog, essentially a Panel with different rendering
 */
Omplus.views.Dialog = Omplus.base.extend(Omplus.views.Panel, {
    render:function () {
        var helper = this;
        this.content.addClass("dialog");
        this.overlay = Omplus.base.create(Omplus.views.Panel, {
            omplusName:helper.omplusName + "_Overlay",
            renderTo:"body",
            height:Omplus.globals.getObject("body").height + "px",
            width:"100%",
            cssClasses:[
                "overlay-panel"
            ]
        });
        var comps = this.components;
        if (this.confirm) {
            this.confirmButton = Omplus.base.create(Omplus.views.Button, {
                omplusName:helper.omplusName + "_ConfirmButton",
                cssClasses:[
                    "dialog-button"
                ],
                model:(helper.confirmButtonModel ? helper.confirmButtonModel : "Assets.list.label_dialog_ok.localValue"),
                controller:(helper.confirmButtonModel ? helper.controller : "languageController"),
                click:this.confirmClick
            });
            comps.push(this.confirmButton.omplusName);
        }
        if (this.cancel) {
            this.cancelButton = Omplus.base.create(Omplus.views.Button, {
                omplusName:helper.omplusName + "_CancelButton",
                cssClasses:[
                    "dialog-button"
                ],
                model:(helper.cancelButtonModel ? helper.cancelButtonModel : "Assets.list.label_dialog_cancel.localValue"),
                controller:(helper.cancelButtonModel ? helper.controller : "languageController"),
                click:helper.cancelClick
            });
            comps.push(this.cancelButton.omplusName);
        }
        this.panel = Omplus.base.create(Omplus.views.Panel, {
            omplusName:helper.omplusName + "_Panel",
            controler:helper.controller,
            model:helper.model,
            renderTo:helper.overlay.omplusName,
            layout:helper.layout,
            width:helper.width,
            height:helper.height,
            cssClasses:[
                "dialog-panel"
            ],
            components:comps
        });

        var content = this.panel.content;
        content.css({
            "margin-top":"-" + (content.height() / 2) + "px",
            "margin-left":"-" + (content.width() / 2) + "px"
        });

        this.components = [
            this.overlay.omplusName,
            this.panel.omplusName
        ];
    },
    confirmClick:function () {
        Omplus.globals.getObject($(this).closest(".dialog").attr("id")).hide();
    },
    cancelClick:function () {
        Omplus.globals.getObject($(this).closest(".dialog").attr("id")).hide();

    },
    showEffect:{
        name:"fade",
        time:300,
        options:{
            direction:"up"
        }
    },
    hideEffect:{
        name:"fade",
        time:300,
        options:{
            direction:"up"
        }
    },
    renderTo:"body",
    omplusType:"Dialog",
    confirmButton:null,
    cancelButton:null,

    confirm:true,
    cancel:true,
    confirmButtonModel:null,
    cancelButtonModel:null
});

Omplus.views.SortableList = Omplus.base.extend(Omplus.views.Panel, {
    omplusType:"SortableList",
    render:function () {
    },
    setValue:function (newValue) {
        var location = $("#" + this.omplusName);
        location.html("");
        var list = jQuery.extend(true, {}, $("<ul></ul>"));
        list.attr("id", this.omplusName + "_Sortable");
        for (var i in newValue) {
            var item = jQuery.extend(true, {}, $("<li></li>"));
//            item.html(newValue[i].name).attr("id", newValue[i].id_jackpots);
            if (this.forDisplay) {
                item.html(newValue[i][this.forDisplay]);
            }
            if (this.forId) {
                item.attr("id", newValue[i][this.forId]);
            }
            list.append(item);
        }
        location.append(list);
        $("#" + list.attr("id")).sortable();
    },
    toArray:function () {
        return $("#" + this.omplusName + "_Sortable").sortable("toArray");
    },
    // used as text for draggable box
    forDisplay:null,
    // used as id of options
    forId:null
});